import { NTag } from 'naive-ui';
import { isArray } from 'lodash-es';

import type { TableFieldProps } from '@/components/table/src/base-table-field';
import { BaseTableField } from '@/components/table/src/base-table-field';

export const TagTableField = defineComponent<TableFieldProps>({
  name: 'TagTableField',
  extends: BaseTableField,
  setup(props) {
    const value = computed(() => props.rowData[props.field.key] ?? props.field.defaultValue);
    const text = computed(() => {
      const options = props.field?.tagOptions?.options;
      if (isArray(options) && options.length) {
        return options?.find(item => item.value === value.value)?.label;
      }
      return '-';
    });
    const type = computed(() => {
      const options = props.field?.tagOptions?.options;
      if (isArray(options) && options.length) {
        return options?.find(item => item.value === value.value)?.type;
      }
      return 'default';
    });

    return () => (
      <NTag size='small' type={type.value}>
        {text.value}
      </NTag>
    );
  },
});
